<!DOCTYPE html>
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="utf-8">
    <title>Liquor Tree: Basic Usage</title>
    <link rel="stylesheet" href="../assets/style.css">
    <script src="../assets/menu.js"></script>

    <!-- first import Vue -->
    <!-- <script src="https://unpkg.com/vue/dist/vue.js"></script> -->
    <script src="../assets/vue.js"></script>
    <script src="/liquor-tree.umd.js"></script>


    <style>
      .demo-tree {
        width: 50%;
      }

      .tree.tree-loading {
        width: 300px;
        height: 300px;
        background: #fff no-repeat url(/assets/img/loading.gif) center;
      }
    </style>
  </head>
  <body>
    <div class="hello">
      Basic Usage.
    </div>

    <div id="app">
      <div class="examples">
        <div class="example">
          <div class="example-description">
            <p>Tree behaviour by default. Without any states. Tree allows to has more than 1 root node.</p>
            <p>Tree allows you to use <b>v-model</b> attribute.</p>
            <p v-if="selectedNode0">Selected nodes: <b>{{ selectedNode0.map(s => s.text) }}</b></p>
          </div>
          <div class="example-tree">
            <tree :data="treeData0" v-model="selectedNode0" />
          </div>
        </div>

        <div class="example">
          <div class="example-description">
            <p>Here we defined some states for Nodes. You can check the whole <a href="https://amsik.github.io/liquor-tree/#Structure" target="_blank">structure</a>.</p>
            <p>Also we added some tree options. <a href="https://amsik.github.io/liquor-tree/#Component-Options">Full list.</a></p>
          </div>
          <div class="example-tree">
            <tree :data="treeData1" :options="treeOptions1"/>
          </div>
        </div>

        <div class="example">
          <div class="example-description">
            <p>Init data can be either Array or Promise object. Loading icon (https://loading.io/)</p>
          </div>

          <div class="example-tree">
            <button @click="initTree2" v-if="!treeData2">Build Tree</button>
            <tree
              v-if="treeData2"
              :data="treeData2"
            />
          </div>
        </div>

        <div class="example">
          <div class="example-description">
            <p>Overriding default structure of tree data</p>
          </div>

          <div class="example-tree">
            <tree
              :data="treeData3"
              :options="treeOptions3"
            />
          </div>
        </div>
      </div>
    </div>

    <script>
      new Vue({
        el: '#app',
        data: () => ({
          /* example 0 */
          selectedNode0: null,
          treeData0: getTreeData0(),

          /* example 1 */
          treeData1: getTreeData1(),
          treeOptions1: {
            multiple: false,
            keyboardNavigation: false,
            parentSelect: true
          },

          /* example 2 */
          treeData2: null,

          /* example 3 */
          treeData3: getTreeData2(),
          treeOptions3: {
            propertyNames: {
              text: 'MY_TEXT',
              children: 'KIDS',
              state: 'OPTIONS'
            },
            deletion: true
          }
        }),

        methods: {
          initTree2() {
            this.treeData2 = new Promise(resolve => {
              setTimeout(() => resolve(getTreeData1()), 2600)
            })

            this.treeData2.then(data => {
              data[0].state = {}
            })
          }
        }
      })

      function getTreeData0() {
        return [
          { text: 'Item 1' },
          { text: 'Item 2', children: [
            { text: 'Item 2.1' },
            { text: 'Item 2.2' },
            { text: 'Item 2.3' }
          ]},
          { text: 'Item 3' },
          { text: 'Item 4' },
          { text: 'Item 5' },
        ]
      }

      function getTreeData1() {
        return [{
            text: 'Item 1',
            state: {
              selected: true
            }
          },

          {
            text: 'Item 2',
            state: {
              expanded: true
            },
            children: [{
                text: '<b>Item 2.1</b>',
                state: {
                  checked: true
                }
              },
              {
                text: 'Item 2.2'
              },
              {
                text: 'Item 2.3',
                children: [{
                    text: 'Item 2.2.3.1'
                  },
                  {
                    text: 'Item 2.2.3.2'
                  },
                  {
                    text: 'Item 2.2.3.3'
                  },
                  {
                    text: 'Item 2.2.3.4',
                    children: [{
                        text: 'Item 2.2.3.4.1'
                      },
                      {
                        text: 'Item 2.2.3.4.2'
                      }
                    ]
                  }
                ]
              },
              {
                text: 'Item 2.4'
              }
            ]
          },

          {
            text: 'Item 3',
            state: {
              selected: true
            }
          },

          {
            text: 'Item 4'
          },

          {
            text: 'Item 5',
            state: {
              expanded: true,
              disabled: true
            },
            children: [{
                text: 'Item 5.1'
              },
              {
                text: 'Item 5.2'
              },
              {
                text: 'Item 5.3'
              }
            ]
          }
        ]
      }

      function getTreeData2() {
        return [
          {
            MY_TEXT: 'JS: The Right Way',
            OPTIONS: { expanded: true },
            KIDS: [
              { MY_TEXT: 'Getting Started', OPTIONS: { checked: true } },
              { MY_TEXT: 'JavaScript Code Style', OPTIONS: { selected: true } },
              { MY_TEXT: 'The Good Parts', KIDS: [
                { MY_TEXT: 'OBJECT ORIENTED', OPTIONS: { checked: true }  },
                { MY_TEXT: 'ANONYMOUS FUNCTIONS', OPTIONS: { checked: true }  },
                { MY_TEXT: 'FUNCTIONS AS FIRST-CLASS OBJECTS', OPTIONS: { checked: true }  },
                { MY_TEXT: 'LOOSE TYPING', OPTIONS: { checked: true }  }
              ]},
              { MY_TEXT: 'Patterns', KIDS: [
                { MY_TEXT: 'DESIGN PATTERNS', OPTIONS: { expanded: true }, KIDS: [
                  { MY_TEXT: 'Creational Design Patterns', KIDS: [
                    { MY_TEXT: 'Factory' },
                    { MY_TEXT: 'Prototype' },
                    { MY_TEXT: 'Mixin' },
                    { MY_TEXT: 'Singleton' }
                  ]},
                  { MY_TEXT: 'Structural Design Patterns'}
                ]},
                { MY_TEXT: 'MV* PATTERNS', cildren: [
                  { MY_TEXT: 'MVC Pattern' },
                  { MY_TEXT: 'MVP Pattern' },
                  { MY_TEXT: 'MVVM Pattern' }
                ]}
              ]}
            ]
          }
        ]
      }
    </script>

  </body>
</html>
